<template>
  <div class="home">
    <div class="home-search" ref="search">
      <div class="home-search-content" @click="$router.push('/search')">
        <van-icon name="search" />腾讯视频会员月卡7.4元
      </div>
    </div>
    <div
      class="home-cate"
      :style="{ height: `${homeCateHeight ? homeCateHeight + 'px' : null}` }"
    >
      <div class="home-cate-sideBar">
        <Sidebar v-model="sideBarActKey" @change="sideBarChange">
          <SidebarItem
            v-for="goodsTypeItem in goodsTypes"
            v-bind:key="goodsTypeItem.key"
            :title="goodsTypeItem.value"
          />
        </Sidebar>
      </div>
      <div class="home-cate-right">
        <div class="home-cate-brands">
          <van-loading v-if="brandLoading" class="g-loading" />
          <Grid :column-num="4" :border="false" gutter="0">
            <GridItem
              v-for="(brand, index) in showBrandList"
              v-bind:key="brand.key"
            >
              <div
                class="home-brands-item"
                :class="{ 'home-brands-item-active': brandActive == index }"
                @click="changeBrand(brand, index)"
              >
                <div class="home-brands-item-img">
                  <img :src="brand.url" alt />
                </div>
                <div class="home-brands-item-name">{{ brand.value }}</div>
              </div>
            </GridItem>
            <GridItem v-if="brandList.length > 7">
              <div
                class="home-brands-item home-brands-item-last"
                @click="togleMoreBrand"
              >
                <div class="home-brands-item-img">
                  <img src="./images/more.png" alt />
                </div>
                <div class="home-brands-item-name">
                  {{ moreBrandState ? '收起' : '查看更多' }}
                </div>
              </div>
            </GridItem>
          </Grid>
        </div>
        <div class="home-cate-goods">
          <van-loading v-if="goodsLoading" class="g-loading" />
          <div
            class="home-cate-goods-none"
            v-if="goodsList.length < 1 && !goodsLoading"
          >
            暂无数据
          </div>
          <Goods
            v-for="item in goodsList"
            :key="item.id"
            :data="item"
            :goodsType="goodsTypes[sideBarActKey]"
            :brand="brand"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Goods from '@/components/goods'
import { Sidebar, SidebarItem, Grid, GridItem } from 'vant'
import { queryGoodsType_get, queryGoods_get } from '@/api/app/combox'
import { querySkuList_get } from '@/api/front/goods'

export default {
  name: 'index',
  components: {
    Sidebar,
    SidebarItem,
    Goods,
    Grid,
    GridItem
  },
  data () {
    return {
      sideBarActKey: 0,
      homeCateHeight: 0,
      goodsList: [],
      goodsLoading: true,
      goodsTypes: [],
      brandList: [],
      brandActive: 0,
      brandLoading: true,
      // 是否展开品牌列表
      moreBrandState: false
    }
  },
  computed: {
    showBrandList () {
      return this.brandList.length > 7 ? this.moreBrandState ? this.brandList : this.brandList.slice(0, 7) : this.brandList
    },
    brand () {
      return this.brandList[this.brandActive]
    }
  },
  mounted () {
    const mainTabbar = document.querySelector('.main-tabbar')
    this.homeCateHeight =
      window.innerHeight -
      mainTabbar.offsetHeight -
      this.$refs.search.offsetHeight

    queryGoodsType_get().then(res => {
      this.goodsTypes = res
      if (res.length > 0) {
        this.queryBrands(res[0].key)
      }
    })
  },
  methods: {
    // 切换品牌
    changeBrand (brand, index) {
      if (index > 7) {
        const bdata = this.brandList.splice(index, 1)
        this.brandList.unshift(bdata[0])
        this.brandActive = 0
        this.moreBrandState = false
      } else {
        this.brandActive = index
        this.moreBrandState = false
      }
      this.queryGoodsList(brand.key)
    },
    // 切换更多品牌
    togleMoreBrand () {
      this.moreBrandState = !this.moreBrandState
    },
    queryGoodsList (goodsId) {
      this.goodsLoading = true
      this.goodsList = []
      querySkuList_get({
        data: {
          goodsId: goodsId
        }
      }).then(res => {
        this.goodsList = res
      }).finally(() => {
        this.goodsLoading = false
      })
    },
    queryBrands (goodsType) {
      this.brandLoading = true
      this.brandList = []
      queryGoods_get({
        data: {
          goodsType: goodsType
        }
      }).then(res => {
        this.brandList = res
        this.queryGoodsList(res[0].key)
      }).finally(() => {
        this.brandLoading = false
      })
    },
    sideBarChange (index) {
      this.goodsLoading = true
      this.goodsList = []
      this.brandLoading = true
      this.brandList = []
      this.moreBrandState = false
      this.brandActive = 0
      this.queryBrands(this.goodsTypes[index].key)
    }
  }
}
</script>
<style lang="scss" scoped src="./styles/index.scss"></style>
